<template>
  <div class="singleArtical">
    <!--作者、发布时间、技术  -->
    <div class="el-row">
      <div class="articalDescription">
        <div>{{ author }}</div>
        <div>{{ time }}</div>
        <div>{{ way }}</div>
      </div>
      <!-- 删除 -->
      <el-icon :size="25" class="closeIcon">
        <Close />
      </el-icon>
    </div>
    <!-- 整体和图片row排序 -->
    <div class="el-row">
      <!-- 内容和反馈colmnu排序 -->
      <div class="el-colmnu">
        <div class="Content">
          <div class="title">{{ title }}</div>
          <div class="dis">{{ content }}</div>
        </div>
        <div class="articalFeedback">
          <div>
            <el-icon class="eachIcon">
              <View />
            </el-icon>
            <span>{{ view }}</span>
          </div>
          <div>
            <el-icon class="eachIcon">
              <!-- <Like/> -->
            </el-icon>
            <span>{{ like }}</span>
          </div>
          <div>
            <el-icon class="eachIcon">
              <ChatRound />
            </el-icon>
            <span>{{ comment }}</span>
          </div>
        </div>
      </div>
      <div>
        <el-image style="width: 180px; height: 100px" :src="url" />
      </div>
    </div>
  </div>
</template>
<!-- 文章item -->
<script>
import { View, ChatRound, Close } from '@element-plus/icons-vue';
export default {
  components: {
    View,
    ChatRound,
    Close
  },
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      author: '前端喜哥',
      time: '5个月前',
      way: '前端·JavaScript',
      title: 'JavaScript的23种设计模式',
      content: '只要你有优化代码的习惯，那么你在工作场景种会经常接触到各种...',
      view: '1.6w',
      like: '401',
      comment: '32'
    };
  }
};
</script>

<style scoped>
s .el-row {
  display: flex;
  flex-direction: row;
}

.el-colmnu {
  display: flex;
  flex-direction: column;
}

.singleArtical {
  display: flex;
  flex-direction: column;
  margin: 0px 50px;
  width: 700px;
  border-top: 1px;
  border-bottom: 1px;
  border-left: 0px;
  border-right: 0px;
  border-color: #bbb;
  border-style: solid;
}

.articalDescription {
  display: flex;
  flex-direction: row;
  /* grid-column: auto; */
}

.articalDescription div {
  /* margin:10px; */
  margin: 10px 0px 5px 0px;
  padding: 0px 20px;
  border-right: 2px solid #bbb;
}

.closeIcon {
  position: absolute;
  /* flex-direction: row-reverse; */
  right: 3%;
  /* flex-direction: row; */
  justify-content: flex-end;
  margin-top: 8px;
}

.Content {
  display: flex;
  justify-content: left;
  flex-direction: column;
  /* flex-wrap: wrap; */
}

.title {
  display: flex;
  font-size: large;
  font-weight: 600;
  justify-self: left;
  margin: 10px 0px 10px 20px;
}

.dis {
  display: flex;
  justify-self: left;
  margin: 0px 0px 10px 20px;
}

.articalFeedback {
  display: flex;
  flex-direction: row;
}

.articalFeedback div {
  margin: 5px 0px 10px 0px;
  padding: 0px 20px;
  border-right: 2px solid #bbb;
}

.eachIcon {
  font-size: 20px;
  top: 5px;
  margin-right: 10px;
}
</style>
